<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程详情</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body>
<div id="app" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <img src="/static/logo.png" class="page-header_logo">

            <div class="page-header_menu">
                <a class="link-black" href="/">首页</a>
                <a class="link-black" href="#">客户端</a>
                <a class="link-black" href="/login.html" v-if="!user.id">登录</a>
                <a class="link-black" href="/user/account.html" v-if="user.id">
                    <el-popover placement="bottom" width="200" trigger="hover">
                        <div class="sub-menu">
                            <div>
                                <el-avatar :size="60" style="float: left" :src="user.avatar">
                                    <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                                </el-avatar>
                                <div style="float: left; padding: 10px">
                                    <div class="user-nickname">{{user.nickname}}</div>
                                    <div class="user-mobile">{{user.mobile}}</div>
                                </div>
                            </div>
                            <div class="button-group">
                                <el-link size="small" :underline="false" href="/user/account.html">我的课程</el-link>
                                <el-link size="small" :underline="false" href="/user/setting.html">账号设置</el-link>
                                <el-link size="small" :underline="false" href="/admin/index.html">管理后台</el-link>
                                <el-link size="small" :underline="false" href="/logout.html">退出登录</el-link>
                            </div>
                        </div>
                        <div slot="reference">
                            <el-avatar :size="32" :src="user.avatar" class="page-header_avatar">
                                <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                            </el-avatar>
                            个人中心
                        </div>
                    </el-popover>
                </a>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="panel">
            <div class="course-detail">
                <el-image :src="course.poster" class="course-detail_poster" style="width: 500px" v-if="course && course.poster">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div class="course-detail_info">
                    <div>
                        <div class="course-title">{{course.name}}</div>
                        <div class="course-desc">{{course.desc}}</div>
                    </div>

                    <div style="display: flex; justify-content: space-between;">
                        <div class="course-info">共 {{course.hour}} 课时，已更新 {{course.lessons && course.lessons.length || 0}} 节，已有 {{course.students}} 人报名</div>
                        <el-button type="primary" round @click="study()" :disabled="!course.lessons || course.lessons.length === 0">免费学习</el-button>
                    </div>
                </div>
            </div>

            <el-tabs v-model="activeTab" class="course-detail-tabs">
                <el-tab-pane label="章节目录" name="first">
                    <div v-for="(lesson, i) in course.lessons" class="course-detail_lesson">
                        <span v-if="lesson.type === 'live'"><i class="el-icon-video-camera"></i> 【直播】</span>
                        <span v-if="lesson.type === 'video'"><i class="el-icon-video-play"></i> 【录播】</span>
                        {{lesson.name}} <small style="color: #909399">（{{lesson.duration | duration}}）</small>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="课程介绍" name="second">
                    暂不开发
                </el-tab-pane>
                <el-tab-pane label="老师介绍" name="third">
                    {{course.teacher}}
                </el-tab-pane>
                <el-tab-pane label="学员评价" name="fourth">
                    暂不开发
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <div class="page-footer">
        <div class="page-footer_inner">
            <div>Copyright © 2021 All Rights Reserved.</div>
            <div>天津码码教育科技有限公司 版权所有 | 服务协议 | 隐私政策 | 侵权投诉 | 联系客服 | 帮助</div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                courseId: this.$request.params.courseId,
                user: {},
                course: {},
                activeTab: 'first'
            };
        },
        methods: {
            loadLessonList: function () {
                let vue = this;

                let url = '/course/detail?courseId=' + vue.courseId;
                axios.get(url).then(resp => {
                    vue.course = resp.data || {};

                    document.title = vue.course.name;
                });
            },
            study: function () {
                let vue = this;

                if (!vue.user.id) {
                    vue.$confirm('登录后才可进行学习, 是否继续?', '提示', {
                        confirmButtonText: '去登录',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.location.href = '/login.html';
                    });
                } else {
                    let lessonId = vue.course.lessons[0].id;
                    window.location.href = '/study.html?courseId=' + vue.courseId + '&lessonId=' + lessonId;
                }
            }
        },
        mounted: function () {
            this.loadLessonList();
            this.$loadLoginUser();
        }
    })
</script>
</html>
